﻿
<h2>Responsables</h2>

    <script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>    
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>    

    
    
<script src="../../Scripts/grid.locale-es.js"></script>

<link href="../../Content/css/ui.jqgrid.css" rel="stylesheet" />

<script src="../../Scripts/jquery.jqGrid.min.js"></script>

<script type="text/javascript">

    alert(document);
    jQuery(document).ready(function()
    {
        var mydata = [{ id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "2", invdate: "2007-10-01", name: "test" },
                   { id: "3", invdate: "2007-10-01", name: "test" },
                   { id: "4", invdate: "2007-10-01", name: "test" },
                   { id: "5", invdate: "2007-10-01", name: "test" },
                   { id: "6", invdate: "2007-10-01", name: "test" },
                   { id: "7", invdate: "2007-10-01", name: "test" },
                   { id: "8", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" },
                   { id: "1", invdate: "2007-10-01", name: "test" }
        ];

            jQuery("#list4").jqGrid({
                        data: mydata,
                        datatype: "local",
                        height: 250,
                        colNames:['Inv No','Date', 'Client'],
                        colModel:[
                            {name:'id',index:'id', width:60},
                            {name:'invdate',index:'invdate', width:60 },
                            {name:'name',index:'name', width:100}
                                ],
                                pager: '#pager',
                                rowNum:2,
                                rowList:[10,20,30],
                                sortname: 'id',
                                sortorder: 'desc',
                                viewrecords: true,
                                multiselect: true,
                                imgpath: "",
                                caption: "Manipulating Array Data"
                }
            );
            
  
            alert(mydata.length);
    for (var i = 0; i <= mydata.length; i++) {
        
        jQuery("#list4").addRowData(i, mydata[i]);
    }
            }//function
    );//ready

</script>

<table>
    <tr><td>hola</td></tr>
</table>

<table id="list4">
</table>


<div id="pager" class="scroll" style="text-align:center;"></div>